{extend name='bus@public/wrap'}
{block name="main"}
<main role="main">
    <div class="ibox-title">
        <h5>按钮管理</h5>
        <div class="pull-right mt-2">
            <button class="btn btn-secondary add"><i class="fa fa-plus  fa-lg"></i>&nbsp;添加</button>
        </div>
    </div>
    <div class="container-fluid">

        <!-- 表单搜索 开始 -->
        <form class="form-inline mt-3">
            <div class="form-group">
                <label>状态</label>
                <select name="status" class="form-control mx-sm-3" placeholder="请选择状态" >
                    <option value="">全部</option>
                    <option value="正常"{eq name="$Think.get.status" value="正常" } selected="selected"{/eq} >正常</option>
                    <option value="禁用"{eq name="$Think.get.status" value="禁用" } selected="selected"{/eq} >禁用</option>
                </select>
            </div>
            <div class="form-group">
                <label>更多搜索</label>
                <input type="text" class="form-control mx-sm-3" name="key" value="{$Think.get.key|default=''}"  placeholder="请输入关键词" >
            </div>
            <div class="form-group">
                <input class="btn btn-info btn-sm" type="button" value=" 查 询 " id="search_plan" style="margin-right: 10px;">
          </div>
        </form>
        <!-- 表单搜索 结束 -->

        <!-- 数据表格 -->
        <div class="mt-3">
            <table id="dg"></table>
        </div>

    </div>
</main>

<script>

    //绑定数据
    function bind() {
        $("#dg").bootstrapTable("refresh");
    }

    $(function () {

        //新增
        $("body").on("click",".add",function () {
            layer.open({
                title: '新增', type: 2, area: ['700px', '450px'], fix: true, maxmin: false
                , content: '/admin/develop/button_edit?id=0'
            });
        });

        //编辑
        $("body").on("click",".edit",function () {
            var id = $(this).attr("data-id");
            layer.open({
                title: '新增', type: 2, area: ['700px', '450px'], fix: true, maxmin: false
                , content: '/admin/develop/button_edit?id='+id
            });
        });

        //删除
        $("body").on("click",".del",function () {
            var id = $(this).attr("data-id");
            var index = layer.confirm('你确定要删除吗？', {
                btn: ['确定','取消']
            }, function(){
                frame.ajax({
                    url:"/admin/develop/button_del",
                    type:"post",
                    data:{"id":id},
                }).then(function (data) {
                    layer.close(index);
                    bind();
                });
            });
        });

        // 搜索按钮
        $("#search").on("click", function () {
            bind();
        });

        //表格
        $('#dg').bootstrapTable({
            method: 'get',
            url: '/admin/develop/button_lst',
            sidePagination: 'server',
            pagination: true,
            pageSize: 20,
            clickToSelect: true,
            singleSelect: true,
            columns: [
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名称'},
                {field: 'sort', title: '排序'},
                {field: 'category', title: '分组'},
                {field: 'action', title: '动作'},
                {field: 'tip', title: '提示'},
                {field: 'status', title: '状态'},
                {field: 'ico', title: '图标'},
                {field: 'color', title: '颜色'},
                {field: '', title: '示例',formatter:function (value, row, index) {
                        return '<button class="'+row.color+'"><i class="'+row.ico+'"></i>&nbsp;'+row.name+'</button>';
                    }},
                {field: '', title: '操作', formatter:function (value, row, index) {
                        return '<a class="edit" data-id="'+row.id+'" >编辑</a>\n' +
                            '<span class="text-explode">|</span>\n' +
                            '<a class="del"  data-id="'+row.id+'" >删除</a>';
                    }
                },
            ],
            queryParams: function (params) {
                params.status = $("[name=status]").val();
                params.key = $("[name=key]").val();
                return params;
            },
        });

    });

</script>

{/block}

